<template>
  <a-select
    v-if="isEdit"
    allowClear
    show-search
    optionFilterProp="label"
    :disabled="record.options.disabled"
    v-model="row[record.key]"
    @change="updateStatus({ row, column })"
    :placeholder="record.options.placeholder"
    :size="record.options.size"
    :mode="record.options.multiple ? 'multiple' : ''"
  >
    <a-select-option
      :value="sitem.value"
      :label="sitem.label"
      :key="index"
      v-for="(sitem, index) in record.options.options"
    >
      <span
        v-if="record.options.optionsColor"
        class="eip-color-btn"
        :style="{ 'background-color': sitem.color }"
      >
        {{ sitem.label }}
      </span>

      <span v-else>
        {{ sitem.label }}
      </span>
    </a-select-option>
  </a-select>

  <label v-else>
    <a-space>
      <span v-for="item in convert(row, column)" :key="item.value">
        <a-button
          class="eip-button"
          :style="{
            'background-color': item.color,
          }"
          shape="round"
          size="small"
        >
          {{ item.label }}</a-button
        >
      </span>
    </a-space>
  </label>
</template>
<script>
export default {
  name: "gridSelect",
  data() {
    return {};
  },
  props: ["column", "row", "record", "isEdit"],
  watch: {},
  methods: {
    /**
     * 更改值状态
     */
    updateStatus() {
      this.$emit("change", {
        row: this.row,
        column: this.column,
      });
    },

    /**
     * 格式化
     */
    convert(row, column) {
      let that = this;
      var value = row[column.field];
      if (value && value.length > 0) {
        var returnValue = [];
        if (that.record.options.multiple) {
          var parseValue = value;
          parseValue.forEach((vitem) => {
            var find = that.$utils.find(
              that.record.options.options,
              (f) => f.value == vitem
            );
            if (find) {
              returnValue.push({
                color: that.record.options.optionsColor
                  ? find.color
                  : "rgba(80,120,150)",
                label: find.label,
                value: find.value,
              });
            }
          });
        } else {
          var find = that.$utils.find(
            that.record.options.options,
            (f) => f.value == value
          );
          returnValue.push({
            color: that.record.options.optionsColor
              ? find.color
              : "rgba(80,120,150)",
            label: find.label,
            value: find.value,
          });
        }

        return returnValue;
      } else {
        return [];
      }
    },
  },
};
</script>
<style lang="less" scoped>
.eip-button {
  color: #fff;
  font-size: 12px;
  border: none;
}
</style>
